<template>
  <q-page class="q-pa-md" >
    <div class="q-pa-md text-center text-grey-6">
      <div class="text-h4">小冷's blog</div>
      <div class="q-pa-md">从生到死，我所追求的究竟是自己的自由，还是别人的束缚？</div>
    </div>
<!--    顶部菜单-->
    <div class="row q-col-gutter-md">
      <div class="nounderline col-sm-3 col-xs-6" v-for="(item,index) in menuList" :key="index">
        <router-link :to="item.url">
          <q-card class="my-card bg-teal-3">
            <q-card-section class="text-center">
              <q-icon class="text-white" :name="item.img" size="3rem" color="primary" />
              <q-btn class="text-white" flat :to="item.url">{{item.name}}</q-btn>
            </q-card-section>
          </q-card>
        </router-link>
      </div>

    </div>
<!--    轮播-->
    <div class="q-pa-md row justify-center">
      <q-carousel
        v-model="slide"
        animated
        navigation
        infinite
        padding
        arrows
        height="350px"
        transition-prev="slide-right"
        transition-next="slide-left"
        :autoplay="autoplay"
        @mouseenter="autoplay = false"
        @mouseleave="autoplay = true"
        class="text-white rounded-borders col-md-12"
      >
          <q-carousel-slide v-for="(item,index) in slideList" :key="index" :name="item.name" :img-src="item.imgSrc" class="column no-wrap flex-center">
            <div class=" custom-caption">
              <div class="text-h4">{{item.title}}</div>
              <div class="text-subtitle1">{{item.describe}}</div>
            </div>
          </q-carousel-slide>

      </q-carousel>
    </div>
<!--    文章列表-->
    <div class=" row q-pa-md items-start q-gutter-lg justify-center" >
      <q-card  class="my-card col-md-5 col-sm-5 col-xs-12 pointer" v-for="(item,index) in slideList" :key="index">
        <q-card-section horizontal style="height: 200px">
          <q-img
            class="col-5"
            :src="item.imgSrc"
          />

          <q-card-section>
            <div class="text-h5 q-mt-sm q-mb-xs">{{item.title}}</div>
            <div class="text-caption text-grey">
              {{item.describe}}
            </div>

          </q-card-section>
        </q-card-section>

        <q-separator />

        <q-card-actions>
          <q-btn flat round icon="event" />
          <q-btn flat>
            5:30PM
          </q-btn>
          <q-btn flat>
            7:00PM
          </q-btn>
        </q-card-actions>
      </q-card>
    </div>
  </q-page>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'blogsPageIndex',
  data () {
    return {
      slide: '1',
      autoplay: true,
      slideList: [{
        name: '1',
        imgSrc: 'https://cdn.quasar.dev/img/mountains.jpg',
        title: '北海三人游1',
        describe: '不知多少人是看了 色达 令人震撼的满山遍野的房子照片而心生向往的'
      },
      {
        name: '2',
        imgSrc: 'https://cdn.quasar.dev/img/parallax1.jpg',
        title: '北海三人游2',
        describe: '不知多少人是看了 色达 令人震撼的满山遍野的房子照片而心生向往的'
      },
      {
        name: '3',
        imgSrc: 'https://cdn.quasar.dev/img/parallax2.jpg',
        title: '北海三人游3',
        describe: '不知多少人是看了 色达 令人震撼的满山遍野的房子照片而心生向往的'
      },
      {
        name: '4',
        imgSrc: 'https://cdn.quasar.dev/img/quasar.jpg',
        title: '北海三人游4',
        describe: '不知多少人是看了 色达 令人震撼的满山遍野的房子照片而心生向往的'
      }
      ]
    }
  },
  computed: {
    ...mapState({
      menuList: state => state.menus.menuList.blogsMenuList
    })

  }
}
</script>
<style scoped>
  a.nounderline, .nounderline a {  text-decoration: none;}
  .custom-caption{
    text-align: center;
    padding: 12px;
    color: white;
    background-color: rgba(0, 0, 0, .3);
  }
  .pointer{
    cursor:pointer;
  }

</style>
